<template>
	<view class="container">
		<view class="u-flex u-row-center u-m-50" v-if="list.length == 0" style="flex-direction: column;">
			<image style="width:300rpx;height:300rpx;" mode="widthFix" src="../../static/img/no.png"></image>
			<text style="color:#ccc">暂无数据</text>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="left">
					<view class="f-logo" :style="{ backgroundImage: 'url(' + (item.logo != undefined ? baseUrl+item.logo : defaultLogo )+ ')' }"><image :src="logoMask" mode="aspectFill"></image></view>
				</view>
				<view class="center">
					<view class="name">{{item.name}}</view>
					<view class="text">{{item.department}}</view>
				</view>
				<view class="right">
					<view class="delete" @click="deleteUser(item.id)">
						<image class="del" src="../../static/mine/del.png"></image>
					</view>
					<view class="bottom" @click="toPhone(item.telephone)">
						<image class="phone" src="../../static/mine/phone.png"></image>
						<text class="tel">{{item.telephone}}</text>
					</view>
				</view>
			</view>
		</view>
		<!--底部弹出红包窗口-->
		<u-popup border-radius="0" v-model="showPop" :mode="modeBottom"  :mask="mask" :closeable="closeable" :close-icon-pos="closeIconPos">
			<view class="add-box">
				<view class="u-p-30 u-font-34">添加授权</view>
				<u-form :errorType="errorType" :model="form" ref="uForm" :label-width="200">
				<u-form-item class="u-m-l-20 u-m-r-20" label="用户名" prop="username">
					<u-input  placeholder="请输入" v-model="form.username" input-align="right" />
				</u-form-item>
				<u-form-item class="u-m-l-20 u-m-r-20" label="姓名" prop="realname">
					<u-input  placeholder="请输入" v-model="form.realname" input-align="right" />
				</u-form-item>
				<u-form-item class="u-m-l-20 u-m-r-20" label="手机号" prop="phone">
					<u-input  placeholder="请输入" v-model="form.phone" input-align="right" />
				</u-form-item>
				<u-form-item class="u-m-l-20 u-m-r-20" label="部门" prop="dept">
					<u-input  placeholder="请输入" v-model="form.dept" input-align="right" />
				</u-form-item>
				<u-form-item  class="u-m-l-20 u-m-r-20" :border-bottom="false" label="">
					<view style="color: #9da2b0;line-height:40rpx;">被授权用户必须具有VIP及以上资格</view>
				</u-form-item>
				<view style="display: flex;margin-top: 20upx;">
					<u-button style="height: 60upx;" @click="showPop = false">取消</u-button>
					<u-button style="height: 60upx;" @click="save" type="primary">确定</u-button>
				</view>
			</u-form>
			</view>
		</u-popup>		
		<u-toast ref="uToast" />
		<u-loadmore class="u-m-t-40" v-if="list.length > 5" :status="loadStatus"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logoMask: this.$mAssetsPath.logoMask,
				baseUrl:this.$mConfig.baseUrl,
				defaultLogo: this.$mAssetsPath.defaultLogo,
				errorType: ['toast'],
				mode: 'bottom',
				mask: true, // 是否显示遮罩
				closeable: true,
				closeIconPos: 'top-right',
				modeBottom: 'bottom',
				form:{
				 "dept": "",
				 "phone": "",
				 "realname": "",
				 "username": ""
				},
				rules: {},
				reqBody: {
					pageNum: 1,
					pageSize: 10,
					status: 1
				},
				loadStatus: 'loadmore',
				showPop:false,
				list: []
			}
		},
		onShow() {
			this.getList();
		},
		onPullDownRefresh: function() {
			this.reqBody.pageNum = 1;
			this.getList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom: function(e) {
			// 此tab为空数据
			this.reqBody.pageNum += 1;
			this.loadStatus = "loading";
			this.getList(this.reqBody.pageNum);
			setTimeout(() => {
				this.loadStatus = "loadmore";
			}, 1000);
		},
		onNavigationBarButtonTap(e) {
			console.log(e);
			this.showPop = true;
		},
		methods: {			
			toPhone(tel) {
				//打电话
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},			
			async getList(page) {
				let data = await this.$apis.findWorkerAll(this.reqBody);
				if(data.data != undefined){
					if (data.data.last) {
						this.loadStatus = "nomore";
					}
					if (page) {
						this.list = this.list.concat(data.data.content);
					} else {
						this.list = data.data.content;
					}
				}
			},
			async save(){
				if(this.form.username === '' || this.form.phone === ''){
					uni.showToast({
						title:"用户名和手机号必填!",
						icon:"none"
					})
					return;
				}
				let result = await this.$apis.companyAuthUser(this.form);
				if(result.code == 200){
					uni.showToast({
						title:"添加成功",
						icon:"success"
					})
					this.getList();
					this.showPop = false;
				}else{
					uni.showToast({
						title:result.message,
						icon:"none"
					})
					return;
				}
			},
			async deleteUser(id){
				let result = await this.$apis.companyDelUser({id:id});
				if(result.code == 200){
					uni.showToast({
						title:"删除成功",
						icon:"success"
					})
					this.getList();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.list {
			width: 100%;
			.f-logo {
					width: 102rpx;
					height: 118rpx;
					background-size: auto 100%;
					background-position: center center;
					image {
						width: 102rpx;
						height: 118rpx;
					}
				}
			.item {
				width: 100%;
				border-bottom: #DADFED solid 1upx;
				height: 164upx;
				display: flex;
				padding: 28upx;

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					text-align: right;

					.delete {
						.del {
							width: 48upx;
							height: 48upx;
						}
					}

					.bottom {
						height: 48upx;
						display: flex;

						.tel {
							line-height: 48upx;
							color: #4B9CFF;
							font-size: 32upx;
						}

						.phone {
							width: 48upx;
							height: 48upx;
						}
					}
				}

				.center {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					padding: 0 22upx;

					.name {
						font-size: 36upx;
						color: #0D1D36;
					}

					.text {
						font-size: 30upx;
						color: #4B9CFF;
					}
				}

				.left {
					.icon {
						width: 96upx;
						height: 108upx;
					}
				}
			}
		}

		.line {
			background-color: #F5F5F9;
			width: 100%;
			height: 20upx;
		}
	}
	.add-box {width:100%;height:800rpx;background-color: #fff;}
</style>
